<template>
  <div>
    <div>
          <!-- <v-progress-linear 
          v-model="headScrollTop"
          fixed
          active
          query
          top
          absolute 
          dark
          background-color="#bcbc"
          :value="headScrollTop"></v-progress-linear> -->
      </div>
    <v-parallax src="#">
     <div class="content">
      <div class="item_content">
        <div class="title">{{title.name}}</div>
        <div class="List_item" v-for="(item) in list" :key="item.type">
          <span class="item" @click="goView(item.type)">
              {{item.name}}
          </span>
       
        </div>
      </div>
    </div>
    </v-parallax>
   
  </div>
</template>
<script>
export default {
  props: ['headScrollTop'],
  data () {
    return {
      list: [
        {
          name: '首页',
          type: 'home'
        },
        {
          name: '关于我',
          type: 'me'
        }
      ],
      title: {
        name: 'Wukeliang'
      },
      scroll: 0
    }
  },
  methods: {
    goView (type) {
      console.log(type);
      this.$router.push({ name: type })
    },
    menu () {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
    },
  }
}
</script>
<style lang="less">
.content {
  background-color: rgba(187, 238, 187, 0.6);
  height: 500px;
  background-image: url('../../../assets/image/index1.svg');
  background-repeat: no-repeat;
  background-size: 100% 80%;
  overflow: hidden;
  font-size: 14px;
  border-radius: 0 0 50% 50%;
  @media screen and (max-width: 600px) {
    width: 100%;
    border-radius: 0 0 10% 10%;
  }
  .item_content {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.3);
    .title {
      margin-right: 30%;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 5px;
    }

    .List_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      .item {
        padding: 10px;
        margin-left: 10px;
        color: rgb(87, 87, 87);
      }
    }
  }
}
</style>